iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 22
0
自我挑戰組

Angular 學習雜記系列 第 22

Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十一)

  • 分享至 

  • xImage
  •  

接續上一個篇章,接下來,要安裝記憶體Web API(In-memory Web API),回到Dos命令列,切換到專案目錄,執行下述指令,用npm指令來安裝記憶體Web API(In-memory Web API)。

npm install angular-in-memory-web-api –save

執行完成後,接下來,要建立一個Service,來當記憶體Web API(In-memory Web API)的載體,也是在Dos命令列,切換到專案目錄,執行下述指令:

ng generate service InMemoryData

在剛建立好的in-memory-data.service.ts中,先要import有關InMemoryDbService,在class要也要先implements InMemoryDbService,接下來,就要建立creatDb(),這個函式,就是以陣列物件的方式,來模擬資料表。所以,可以將之前的employeelist.ts的假資料,直接放在這邊,就可以用了。如果要有第二個模擬資料表,就繼續const 接下去即可,在return時,如果有二個模擬資料表,就要回傳二個物件。(用逗號分開),程式碼如下:

import { InMemoryDbService } from 'angular-in-memory-web-api';
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class InMemoryDataService implements InMemoryDbService {
  createDb() {
    const employeelist = [
      { id: 1, serialnumber: 'W01', name: '張三', address: '台北市內湖區', sales: 32000 },
      { id: 2, serialnumber: 'W02', name: '李四', address: '台北市信義區', sales: 28000 },
      { id: 3, serialnumber: 'W03', name: '王五', address: '', sales: 31500 }
    ];

    return (employeelist);
  }
}

完成記憶體Web API(In-memory Web API),還要在修改app.module.ts來import相關的類別及Service,再加入到@NgModule.imports 陣列中,程式碼如下:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

// 引用記憶體Web API(In-memory Web API)所需類別及Service
import { HttpClientModule } from '@angular/common/http';
import { HttpClientInMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { EmployeeListComponent } from './employee-list/employee-list.component';
import { EmployeeDetailComponent } from './employee-detail/employee-detail.component';
import { EmployeeSalesListComponent } from './employee-sales-list/employee-sales-list.component';

@NgModule({
  declarations: [
    AppComponent,
    EmployeeListComponent,
    EmployeeDetailComponent,
    EmployeeSalesListComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule,
    HttpClientInMemoryWebApiModule.forRoot(
      InMemoryDataService, { dataEncapsulation: false }
    )
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

現在,就可以用記憶體Web API(In-memory Web API)來取代之前的假資料類別,可以進行模擬資料表的查詢、列表、新增、更新、刪除等功能。在後續的章節中,再一一實做。


上一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十)
下一篇
Angular 學習雜記-Angular整合應用網站-員工資料管理系統(十二)
系列文
Angular 學習雜記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言